<template>
  <div>
    <el-input
      v-model="queryParams.searchStr"
      style="max-width: 300px"
      placeholder="请输入入住人姓名或联系方式"
    >
      <template #append>
        <el-button :icon="Search" @click="getList" />
      </template>
    </el-input>
    <div v-loading="loading" class="mt20">
      <template v-if="list.length > 0">
        <div class="primary-section pv-12 ph-16" v-for="item in list" :key="item.id">
          <el-row align="middle">
            <el-col :span="16">
              <el-tag type="" effect="dark" v-if="item.status == 1">入住中</el-tag>
              <el-tag type="info" effect="dark" v-if="item.status == 2">已退房</el-tag>
              <span class="font-w ml10">{{ item.renter.name }}</span>
            </el-col>
            <el-col :span="8" align="right">
              <el-button link type="primary" @click="() => lodgingDetailVisible = true">详情</el-button>
            </el-col>
          </el-row>
          <div class="mt5 fc-regular">{{ item.checkInStart }} ~ {{ item.checkInEnd }}</div>
        </div>
      </template>
      <el-empty v-else description="暂无记录" />
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      layout="prev, pager, next,"
      @pagination="getList"
    />
    <LodgingDetail v-model:visible="lodgingDetailVisible" @cancel="() => lodgingDetailVisible = false" />
  </div>
</template>
<script setup name="CheckInRecord">
import { Search } from '@element-plus/icons-vue'
import LodgingDetail from '../lodgingDetail/index.vue'
import CheckInApi from "@/api/room/checkin.js";

const list = ref([])
const loading = ref(false)
const total = ref(0)
const lodgingDetailVisible = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    searchStr: ''
  }
})

const { proxy } = getCurrentInstance()


const emit = defineEmits()
const props = defineProps({
  roomInfo: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const { queryParams } = toRefs(data)

/* 获取列表 */
function getList() {
  loading.value = true
  total.value = 0
  list.value = []

  if (!props.roomInfo.roomId || props.roomInfo.roomId === '') {
    loading.value = false
    return
  }

  queryParams.value.roomId = props.roomInfo.roomId
  CheckInApi.list(queryParams.value).then(res => {
    list.value = res.rows.map(item => {
      item.renter = {
        name: '--'
      }
      if (item.renterList && item.renterList.length !== 0) {
        item.renter = item.renterList[0]
      }
      return item
    })
    total.value = res.total
    loading.value = false
  })
}

getList()
</script>
